<template>
  <div class="cus">
    <div class="cus_box" style="width:1200px;">
      <div class="title">
        <span>查看仓门</span>
        <i @click="$emit('warehouse_gate_dall')" class="el-icon-close"></i>
      </div>
      <div class="content">
        <div class="items">
          <div class="item" v-for="item in list">
            <p>
              <span>{{ item.cabinetNo }}号柜门</span>
              <span>{{ item.cabinetStatus == 1 ? "开启" : "关闭" }}</span>
            </p>
            <ul>
              <li></li>
              <li>
                <p>
                  <span>EnableStatus：</span>
                  <el-switch
                    v-model="item.disableStatus"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    @change="switchChange(item)"
                    inactive-color="#ff4949"
                  ></el-switch>
                </p>
                <p>
                  BatteryStatus：{{
                    item.status == 0
                      ? "没有Battery"
                      : item.status == 1
                      ? "有Battery"
                      : ""
                  }}
                </p>
                <p>
                  充电Status：
                  <span :class="item.status == 5 ? 'color1' : ''">{{
                    item.status == 2
                      ? "Battery充满"
                      : item.status == 5
                      ? "异常"
                      : ""
                  }}</span>
                </p>
                <p>柜门Temperature：{{ item.temperature }}度</p>
              </li>
              <!--                  <li><span>刷新</span></li>-->
            </ul>
          </div>
        </div>

        <!--            <div class="btns">-->
        <!--              <el-button @click="$emit('warehouse_gate_dall')">Cancel</el-button>-->
        <!--              <el-button type="primary" @click="dataFormSubmit()">Confirm</el-button>-->
        <!--            </div>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "warehouse_gate",
  data() {
    return {
      id: "",
      list: [],

      timer: null,
      fag: true
    };
  },
  props: ["res"],
  destroyed() {
    this.fag = false;
    clearInterval(this.timer);
  },
  mounted() {
    this.id = this.res.id;
    this.getData();

    this.timer = setInterval(() => {
      if (this.fag) {
        this.getData();
      }
    }, 3000);
  },
  methods: {
    async getData() {
      var res = await this.apis.device_channelList({
        id: this.id
      });
      this.list = res.data || [];
    },
    async switchChange(item) {
      const res = await this.apis.device_updateDisable({
        id: item.id
      });

      this.$message({
        message: "Operations Success！",
        type: "success"
      });
    }
  }
};
</script>

<style scoped lang="scss">
.items {
  overflow: hidden;

  .item {
    float: left;
    width: 150px;
    border: 1px solid #eee;
    margin-left: 10px;
    margin-top: 10px;
    border-radius: 5px;
    padding: 10px;

    > p {
      overflow: hidden;

      span:nth-child(2) {
        float: right;
      }
    }

    > ul {
      margin-top: 8px;

      li:nth-child(2) {
        p {
          margin-top: 5px;
        }
      }

      li:nth-child(3) {
        text-align: right;
        margin-top: 15px;

        span {
          border: 1px solid #999;
          padding: 3px 10px;
          border-radius: 10px;
        }
      }
    }
  }
}

.content {
  max-height: 500px;
  overflow-y: scroll;
}
</style>
